<template>
    <uni-popup
            ref="popup"
            background-color="transparent"
        >
            <view class="toVip_content">
                <view class="toVip_box">
                    <view class="top d-flex d-r j-center"><text class="text">{{props.title}}</text></view>
                    <view class="desp1">
                        <text class="text">{{props.desp}}</text>
                    </view>
                    <view class="btn d-flex a-center j-center" @tap="goMemberCenter">
                        <text class="text">{{props.btntext}}</text>
                    </view>
                </view>
                <image @tap="popup.close()" class="close w-center" src="/static/image/guanbi.png" mode="" />
            </view>
        </uni-popup>
</template>

<script setup lang="ts">
import { ref,computed } from "vue";
import { ver } from "@/store/ver";
import { userData as userDataStore } from "@/store/userData";

const userData = userDataStore();
const VER = ver();
const emit = defineEmits(["submit"]);


const props = defineProps({
    title: {
        type: String,
        required: true,
    },
    desp: {
        type: String,
        required: true,
    },
    btntext: {
        type: String,
        required: true,
    },
});


const popup = ref(null);

const goMemberCenter = ()=>{
    popup.value.close();
    if(props.btntext==='知道了'){
        return;
    }

    uni.navigateTo({
        url: '/pages/userinfo/card',
    });
}



const open = ()=>{
    popup.value.open();

}



defineExpose({
  open,
})


</script>
<style lang="scss" scoped>
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.toVip_content{
    position:relative;
    width:540rpx;
    .shadow1{
        position:absolute;
        z-index:1;
        top:0;
        left:0;
        width:540rpx;
        background: linear-gradient(to bottom,#CBF6E3,#FFFFFF);
    }

    .toVip_box{
        position: relative;
        width:540rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background:#fff;
        padding-bottom:40rpx;
        .top {
            width: 540rpx;
            height: 124rpx;
            background: linear-gradient(to bottom,#CBF6E3,#FFFFFF);
            text-align: center;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            .text{
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-top:32rpx;

            }
        }

        .desp1{
            padding: 0 40rpx;
            text-align:left;
            .text{
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999;
                line-height: 50rpx;
            }
        }

        
    }

    .desp{
        position: relative;
        z-index:10;
        font-size:28rpx;
        color:#333;
        padding: 0 40rpx;
    }
    .btn{
        width: 460rpx;
        height: 80rpx;
        background: linear-gradient(to right,#29DBA3,#64F1C5);
        border-radius: 20rpx;
        z-index:10;
        margin-top:50rpx;
        margin-left:40rpx;
        .text{
            color:#fff;
            font-size:32rpx;
            font-weight:600;
        }
        &:active{
            opacity: .7;
        }
    }

    .close{
        width:52rpx;
        height:52rpx;
        left:244rpx;
        bottom:-112rpx;
    }


}
</style>

